<script lang="ts" setup>
import type { Statistics01Item } from '@/api/designer/model'
import type { Statistics01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderStatistics01.less'

type RenderedItems = Array<{ row: number, cols: Array<Statistics01Item> }>
defineOptions({
  name: 'RenderStatistics01',
})
const props = defineProps<{
  render: Statistics01ComponentMeta
}>()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { style, wraperCls } = useCompStyleRender(props)
const renderedItems = computed<RenderedItems>(() => {
  const result: RenderedItems = []
  if (platform.value !== 'mobile') {
    return result
  }
  const items = props.render.config.items
  if (!items || items.length === 0) {
    return result
  }
  for (let i = 0, row = 1; i < items.length; i += 2) {
    const cols: Statistics01Item[] = [items[i]]
    const next = items[i + 1]
    if (next) {
      cols.push(next)
    }
    result.push({
      row,
      cols,
    })
  }
  return result
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('wraper-bg')" />
    <div v-if="platform === 'mobile'" :class="prefix('main')">
      <!-- item for loop -->
      <div v-for="row of renderedItems" :key="row.row" :class="prefix('row')">
        <div v-for="col of row.cols" :key="col.id" :class="prefix('col')">
          <div :class="prefix('value')">
            {{ col.value || 'XX+' }}
          </div>
          <div :class="prefix('title')">
            {{ col.title || 'YYYY' }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="platform === 'pc'" :class="prefix('main')">
      <!-- item for loop -->
      <div v-for="(item, index) in render.config.items" :key="item.id" :class="prefix('loop')">
        <div :class="prefix('col')">
          <div :class="prefix('value')">
            {{ item.value || 'XX+' }}
          </div>
          <div :class="prefix('title')">
            {{ item.title || 'YYYY' }}
          </div>
        </div>
        <!-- 分隔符 -->
        <div v-if="index !== render.config.items!.length - 1" :class="[prefix('seperator'), prefix(`seperator-${render.config.items!.length}`)]" />
      </div>
    </div>
  </div>
</template>
